<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<c:set var="rowCount" value="${data_list.size}" />
<c:set var="offset" value="${data_list.number * data_list.size}" />

<div class="container-fluid">
    <div class="row media-middle">
        <div class="col-xs-12">
            <h3 style="padding: 0 3px; margin: 0; color: #777;"><i class="fa fa-book"></i> 报名信息管理</h3>
        </div>
    </div>
    <div class="tabbable-custom margin-top-20">
        <ul id="product_tab_nav" class="nav nav-tabs" data-category="tabNav">
            <li class="active">
                <a id="tab_nav_product_list" href="#tab_product_list" data-toggle="tab" data-tab-nav="list"> 列表 </a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="tab_product_list" data-category="tab" data-tab="list">
                <div class="row margin-bottom-20" style="background-color: #F8F8F8; padding: 15px 0; margin-left: 0; margin-right: 0;">
                    <div class="col-xs-6">
                        <div class="input-group">
                            <input id="keyword" type="text" class="form-control" style="padding-right: 44px;"
                                   placeholder="可输入姓名"
                            >
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" style="height: 34px;" onclick="onPageChange(1);">
                                    <span class="glyphicon glyphicon-search"></span>
                                </button>
                            </span>
                        </div>
                    </div>
                    <div class="col-xs-6 text-right">
                        <div class="btn-group">
                            <a id="export_detail" class="yellow-gold btn btn-circle btn-default green-meadow" href="javascript:;" onclick="exportDetail();" style="margin-left: 10px;">
                                <i class="fa fa-file-excel-o"></i> 导出
                            </a>
                        </div>
                    </div>
                </div>
                <div id="list-container">

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        onPageChange(1);

        // 按下回车执行搜索
        $("#keyword").keyup(function(e){
            if(e.keyCode == 13){
                onPageChange(1);
            }
        });
    });

    function onPageChange(page) {
        if (!page) {
            page = 1;
        }
        var data = {
            page: page,
            optionMap: {
                keyword: $("#keyword").val()
            }
        };
        ajaxLoad(data, "${ctx}/back/toList", "list-container");
    }

    function exportDetail() {
        window.open("${ctx}/back/export");
    }

</script>
